<template>
  <div class="pagetable-container">
    <!-- Element Plus 表格 -->
    <el-table
      :data="paginatedData"
      border
      stripe
      style="width: 100%"
      :height="tableHeight"
    >
      <el-table-column
        type="index"
        label="序号"
        width="80"
        :index="indexMethod"
        align="center"
        header-align="center"
      />
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        align="center"
        header-align="center"
      >
        <!-- 支持自定义列内容 -->
        <template #default="scope" v-if="column.slot">
          <slot :name="column.slot" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px; text-align: center; justify-content: center"
      @update:current-page="handleCurrentChange"
      @update:page-size="handleSizeChange"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 50, 100]"
      layout="  prev, pager,sizes, next,total"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script setup>
import { computed, ref, toRefs, watch, onMounted, onUnmounted } from "vue";

const tableHeight = ref("600px"); // 默认高度，可根据需要调整

// 接收父组件 props
const props = defineProps({
  data: {
    type: Array,
    required: true,
    default: () => [],
  },
  columns: {
    type: Array,
    required: true,
    default: () => [],
  },
  initialPageSize: {
    type: Number,
    default: 10,
  },
});

// 响应式数据
const { data, columns, initialPageSize } = toRefs(props);
const currentPage = ref(1);
const pageSize = ref(initialPageSize.value);

// 监听 initialPageSize 变化（如果父组件动态传递）
watch(initialPageSize, (val) => {
  pageSize.value = val;
});

// 计算分页后的数据
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return data.value.slice(start, end);
});

// 总数据量
const total = computed(() => data.value.length);

// 每页条数变化
function handleSizeChange(val) {
  pageSize.value = val;
  currentPage.value = 1;
}

// 当前页变化
function handleCurrentChange(val) {
  currentPage.value = val;
}

// 序号列方法，保证分页后序号连续
function indexMethod(index) {
  return (currentPage.value - 1) * pageSize.value + index + 1;
}

onMounted(() => {
  const calculateHeight = () => {
    const pageHeader = 60; // 页面头部高度
    const pagination = 50; // 分页组件高度
    const padding = 35; // 边距
    const pageHeight = 110; // 分页高度
    tableHeight.value = `${
      window.innerHeight - pageHeader - pagination - padding - pageHeight
    }px`;
  };

  calculateHeight();
  window.addEventListener("resize", calculateHeight);
});
</script>

<style scoped>
.pagetable-container {
  margin: 5px 0;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}

.el-pagination el-pagination--default {
  margin-top: 10px;
}
</style>
